<template>
  <div id="main-algo-context">
    <Tabs value="name1">
        <Tab-pane :label='label1' name="name1"><main-con-tabs v-for="(item,index) in shows" :shows-item='item' :key="index" :myurl="url" ref="text"/></Tab-pane>
        <Tab-pane :label="label2" name="name2"><main-con-tabs v-for="(item,index) in shows" :shows-item='item' :key="index" :myurl="url" ref="text"/></Tab-pane>
        <Tab-pane :label="label3" name="name3"><main-con-tabs v-for="(item,index) in shows" :shows-item='item' :key="index" :myurl="url" ref="text"/></Tab-pane>
    </Tabs>
    </div>
</template>

<script>
import MainConTabs from 'components/content/contabs/MainConTabs.vue'
export default {
  name:'TabsContext',
  data(){
    return {
      label1:'',
      label2:'',
      label3:''
    }
  },
  components:{
    MainConTabs
  },
  props:{
    shows:{
      type:Array,
      default(){
        return [];
      }
    },
      url:''
  }
}
</script>

<style>
#main-algo-context{
  cursor: pointer;
  background-color: #fff;
  width: 63.75rem;
  margin: 2% auto;
  padding: 25px;
  border-radius:30px;
}
.ivu-tabs-nav .ivu-tabs-active,
.ivu-tabs-nav .ivu-tabs-tab-active,
.ivu-tabs-nav .ivu-tabs-focused,
.ivu-tabs-nav .ivu-tabs-tab:hover{
  color: #8c30f5;
}
.ivu-tabs-nav .ivu-tabs-ink-bar{
  border-color: #8c30f5;
  background-color: #8c30f5;
}
</style>